<template>
  <div class="about" v-loading="loading">
    <div style="position: relative">123</div>
    <Form v-model="model" :col="6" :list="list" ref="refForm" />
  </div>
  <button @click="loading = !loading">btn</button>
</template>
<script setup lang="ts">
import Form from 'custom/form';
import type { Schema } from 'custom/types/comp';
import { ref, useTemplateRef } from 'vue';
const loading = ref(false);
const list: Schema[] = [
  {
    type: 'Upload',
    field: 'upload',
    label: '上传',
  },
  {
    type: 'Input',
    field: 'field1',
    label: 'test',
    rules: [{ required: true, message: '不能为空' }],
  },
  {
    type: 'Password',
    field: 'field2',
    label: 'test',
  },
  {
    type: 'Switch',
    field: 'field3',
    label: 'test',
  },
  {
    type: 'InputNumber',
    field: 'field4',
    label: 'test',
  },
  {
    type: 'Select',
    field: 'field5',
    label: 'test',
    props: {
      options: [{ label: 'label', value: 'value' }],
    },
  },
];
const refForm = useTemplateRef('refForm');

const model = ref({
  field1: '',
  field2: '',
  field3: '',
  field4: '',
  field5: '',
});

const test = async () => {
  const res = await refForm.value?.handleSubmit();
  console.log('in ', res);
};
const test2 = () => {
  const res = refForm.value?.handleReset();
  console.log(res);
};
</script>
<style scoped lang="scss"></style>
